<!--单项目公共组件-->
<template>
    <basic-container>
        <el-form :inline="true" :model="proInfoForm" class="demo-form-inline">
            <el-form-item label="当前项目名称">
                <el-input v-model="proInfoForm.epsName" disabled placeholder="当前项目名称"></el-input>
            </el-form-item>
            <el-form-item label="当前项目名称">
                <el-input v-model="proInfoForm.code" disabled placeholder="当前项目名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="showProListTree">切换项目</el-button>
            </el-form-item>
        </el-form>

        <!--单项目列表组件-->
        <el-dialog title="单项目选择对话框"
                   :visible.sync="dialogVisible"
                   :modal="false"
                   class="proListTreeDialog">
            <el-table
                    :data="data"
                    v-loading="loading"
                    style="width: 100%"
                    row-key="id"
                    border
                    lazy
                    @row-click="singleElection"
                    @selection-change="handleSelectionChange"
                    :load="treeLoad"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                >
                <el-table-column
                        type="selection"
                        align="center"
                        width="55">
                    <template slot-scope="scope">
                        <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
                        <el-radio class="radio" v-model="templateSelection" :label="scope.row.id"
                        >&nbsp;</el-radio
                        >
                    </template>
                </el-table-column>

                <el-table-column
                        prop="date"
                        align="center"
                        label="项目名称"
                        sortable
                        >
                </el-table-column>
                <el-table-column
                        prop="name"
                        align="center"
                        label="项目编码"
                        sortable
                        >
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel" size="small">取 消</el-button>
                <el-button type="primary" size="small" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </basic-container>
</template>

<script>

export default {
    name: "single ProCom",
    components: {},
    computed: {
    },
    data(){
        return{
            proInfoForm:{
                name:'',
                code:''
            },
            dialogVisible:false,
            loading:false,
            data:[{
                id: 1,
                name: '项目1',
                code: '1'
            }, {
                id: 2,
                name: '项目2',
                code: '2',
                children: [],
                hasChildren:true
            }, {
                id: 3,
                name: '项目3',
                code: '3',
                children: [{
                    id: 31,
                    name: '项目3-1',
                    code: '3-1',
                }, {
                    id: 32,
                    name: '项目3-2',
                    code: '3-2',
                }]
            }, {
                id: 4,
                name: '项目4-1',
                code: '4',
            }],
            multipleSelection: [],
            //   当前选择的行的id
            templateSelection: "",
            //   当前选择的行的数据
            checkList: [],
        }
    },
    methods:{
        showProListTree(){
            console.log("this.userInfo:",this.userInfo)
            this.dialogVisible = true ;
        },
        cancel(){
            this.dialogVisible = false ;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        returnProjectList() {
            // projectEpsClass.getSingleProjectListWithUserMenu(this.userInfo.user_id, "1647869299290947585").then(res => {
            //     console.log("getSingleProjectListWithUserMenu", res.data.data)
            // })
        },
        treeLoad(tree, treeNode, resolve) {

            setTimeout(() => {
                resolve([
                    {
                        id: 31,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        id: 32,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }
                ])
            }, 1000)

        },

        submit(){

        },
        singleElection(row) {
            this.templateSelection = row.id
            this.checkList = this.data.filter((item) => item.id === row.id)
            console.log(`该行的编号为${row.id}`,this.checkList )
        },
    }
}
</script>

<style scoped>

</style>
